<template>
  <div class="">
    <el-row>
      <el-col :md="20">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="分销商搜索：" class="mt_5">
            <el-input v-model="formInline.user" placeholder="分销商名称"></el-input>
          </el-form-item>
          <el-button type="primary">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary">
            <i class="el-icon-refresh"></i>
          </el-button>
        </el-form>
        <el-dialog title="运营商筛选" :visible.sync="dialogVisible" width="40%">
          <el-form>
            <el-row class="lh33">
              <el-col :md="8" class="tr">
                运营商归类：
              </el-col>
              <el-col :md="16">
                <el-select v-model="value8" filterable placeholder="请选择" class="w100">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
      </el-col>
      <el-col :md="4" class="float-right">
        <router-link :to="agentNew">
          <el-button type="primary">新增</el-button>
        </router-link>
      </el-col>
    </el-row>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="customer" label="客户" width="110">
        <template slot-scope="scope">
          <span class="link" @click="getDetail(scope.row)">{{ scope.row.customer}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pay" label="支付方式" width="100">
      </el-table-column>
      <el-table-column prop="xinyong" label="信用额度" width="100">
      </el-table-column>
      <el-table-column prop="yue" label="余额" width="100">
      </el-table-column>
      <el-table-column prop="customer_type" label="客户类型" width="120" v-if="$route.fullPath == '/agent_increase'">
      </el-table-column>
      <el-table-column prop="activecardnum" label="激活卡号数" width="100">
      </el-table-column>
      <el-table-column prop="allcardnum" label="所属卡号总数" width="110">
      </el-table-column>
      <el-table-column prop="user" label="联系人" width="">
      </el-table-column>
      <el-table-column prop="sale" label="销售" width="140">
      </el-table-column>
      <el-table-column prop="methods" label="操作" width="200">
        <template slot-scope="scope">
            <router-link size="mini" tag="button" :to="agentEdit" class="el-button el-button--default el-button--mini">编辑</router-link>
            <el-button
              size="mini"
              type="danger">删除
            </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        flag: false,
        agentNew: '/agent_profit/new',
        agentEdit: '/agent_profit/edit',
        formInline: {
          user: '',
          carrierSearch: ''
        },
        visible2: false,
        dialogVisible: false,
        options: [{
          value: '选项1',
          label: '移动'
        }, {
          value: '选项2',
          label: '联通'
        }, {
          value: '选项3',
          label: '电信'
        }, {
          value: '选项4',
          label: '虚拟运营商'
        }],
        tableData: [
            {
                id: 1,
                customer: 'kimiTestData',
                pay: '预付',
                xinyong: '0.0',
                yue: '12.42',
                customer_type: '企业',
                activecardnum: 0,
                allcardnum: 3,
                user: 'kimi',
                sale: '测试者，销售测试'
            }
        ],
        tableData1: [],
        newTableData: [],
        value8: ''
      }
    },
    mounted() {
    //   this.getCarrierData()
        if (this.$route.fullPath == '/agent_increase') {
          this.agentNew = '/agent_increase/new'
          this.agentEdit = '/agent_increase/edit'
        } else {
          this.agentNew = '/agent_profit/new'
          this.agentEdit = '/agent_profit/edit'
        }
    },
    methods: {
    //   onSubmit() {
    //     if (this.formInline.user) {
    //       this.tableData = this.tableData1
    //       this.newTableData = this.tableData.filter((res) => {
    //         console.log(res['carrier'] == this.formInline.user)
    //         return res['carrier'].includes(this.formInline.user)
    //       })
    //     } else {
    //       this.newTableData = this.tableData1
    //     }
    //     this.tableData = this.newTableData
    //   },
    //   deleteSingData(goods) {
    //     this.tableData= this.tableData1 = this.tableData.filter((res) => {
    //       return res.carrierId != goods.carrierId
    //     })
    //   },
      getDetail(goods) {
        var path = ''
        if(this.$route.fullPath == '/agent_profit') {
          path = `/agent_profit/${goods.id}`
        } else {
          path = `/agent_increase/${goods.id}`
        }
        this.$router.push({
          path: path
        })
      }
    //   select(index, row) {
    //     console.log(index, row)
    //   },
    //   getCarrierData() {
    //     this.$axios.get('/api/carrier').then((res) => {
    //       if (res.data.errno === 0) {
    //         this.tableData = this.tableData1 = res.data.data.carrierData
    //       }
    //     })
    //     this.formInline.user = ''
    //   }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .mt_2 {
    margin-top: -2px;
  }
  
  .tr {
    text-align: right;
  }
  
  .lh33 {
    line-height: 33px;
  }
  
  .w100 {
    width: 100%;
  }
</style>
